<template>
    <el-dialog
        :title="'打印预览'"
        v-model="visible"
        :width="1200"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <div class="printMain" ref="printMain">
            <div class="item" v-for="(item, index) in orderlist" :key="index">
                <div>
                    <el-row
                        class="title"
                    >{{ item.receivingOrderType == '0' ? '销售出库单' : item.receivingOrderType == '1' ? '销售退货单' : item.receivingOrderType == '2' ?'销售回瓶单':item.receivingOrderType == '4' ?'还货出库单':'销售出库单' }}</el-row>
                    <el-row class="subtitle">
                        <el-row style="width: 1000px;">
                            <div class="h-10"></div>
                            <el-col :span="10">单据编号：{{ item.orderCode }}</el-col>
                            <el-col :span="2"></el-col>
                            <el-col :span="2"></el-col>
                            <el-col :span="10" class="text-r">库存组织：{{item.purchaseUnityFullName}}</el-col>
                            <div class="h-5"></div>
                            <el-col
                                :span="10"
                            >业务日期：{{ item.applyDate.length>10? item.applyDate.slice(0, 10):item.applyDate }}</el-col>
                            <el-col :span="2"></el-col>
                            <el-col :span="2"></el-col>
                            <el-col :span="10" class="text-r">客户名称：{{ item.storeFullName }}</el-col>
                            <div class="h-5"></div>
                            <el-col :span="2">备注：</el-col>
                            <el-col :span="22">{{ item.remarks }}</el-col>
                            <div class="h-10"></div>
                            <el-table
                                :data="item.orderCodeItems"
                                border
                                style="width: 100%;border: 2px solid #ebeef5;"
                                show-summary
                            >
                                <el-table-column label="序号" type="index" width="80" />
                                <el-table-column width="200" label="物料名称" prop="materialName"></el-table-column>
                                <el-table-column label="规格型号" prop="materialSpecs" min-width="110"></el-table-column>
                                <el-table-column label="单位">
                                    <template #default="scope">{{ scope.row.unitName }}</template>
                                </el-table-column>
                                <el-table-column label="厂家名称" width="200" prop="supplierFullName"></el-table-column>
                                <el-table-column prop="qty" label="数量"></el-table-column>
                                <el-table-column label="单价">
                                    <template #default="scope">{{ scope.row.price }}</template>
                                </el-table-column>
                                <el-table-column prop="totalAmount" label="总价"></el-table-column>
                                <el-table-column
                                    prop="borrowStorageOrderCode"
                                    label="借货单号"
                                    v-if="item.receivingOrderType == '4'"
                                    min-width="210"
                                >
                                    <template #default="scope">
                                        <span
                                            class="el-span-text"
                                            @click="opBorrowShow(scope.row, scope.$index)"
                                        >{{scope.row.borrowStorageOrderCode}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="仓库" width="140">
                                    <template #default="scope">{{ scope.row.warehouseName }}</template>
                                </el-table-column>
                                <el-table-column prop="remarks" label="备注" min-width="100"></el-table-column>
                            </el-table>
                            <div class="h-30"></div>
                            <el-col :span="8">制单人：{{ item.documentsUser }}</el-col>
                            <el-col :span="8" class="text-c">修改人：{{ item.updateName }}</el-col>
                            <el-col :span="8" class="text-r">审核人：{{ item.reviewed || '无'}}</el-col>
                            <div class="h-5"></div>
                            <el-col
                                :span="8"
                            >制单日期：{{ item.createTime.length>10? item.createTime.slice(0, 10):item.createTime }}</el-col>
                            <el-col
                                :span="8"
                                class="text-c"
                            >修改时间: {{ item.updateTime.length>10? item.updateTime.slice(0, 10):item.updateTime }}</el-col>
                            <el-col
                                :span="8"
                                class="text-r"
                            >审核时间：{{item.reviewTime?item.reviewTime.length>10? item.updateTime.slice(0, 10):item.updateTime : '无'}}</el-col>
                        </el-row>
                    </el-row>

                    <div class="h-30"></div>
                </div>
                <div style="page-break-after: always;"></div>
            </div>
        </div>
        <div class="interval"></div>
        <div class="subtitle">
            <el-button type="primary" @click="print">普通打印</el-button>
        </div>
    </el-dialog>

    <template>
        <el-dialog
            v-model="borrowPurchaseOrderState"
            title="借货详情"
            :width="1300"
            :center="true"
            append-to-body
            style="height: 540px"
        >
            <el-row style="margin-bottom: 50px;">
                <el-table
                    :data="borrowPurchaseOrders"
                    border
                    style="width: 100%;border: 2px solid #ebeef5;"
                    show-summary
                >
                    <el-table-column width="200" label="物料名称" prop="materialName"></el-table-column>
                    <el-table-column label="规格型号" prop="materialSpecs" min-width="110"></el-table-column>
                    <el-table-column label="单位">
                        <template #default="scope">{{ scope.row.unitName }}</template>
                    </el-table-column>
                    <el-table-column label="厂家名称" width="200" prop="supplierFullName"></el-table-column>
                    <el-table-column prop="qty" label="数量"></el-table-column>
                    <el-table-column label="单价">
                        <template #default="scope">{{ scope.row.price }}</template>
                    </el-table-column>
                    <el-table-column prop="totalAmount" label="总价"></el-table-column>
                    <el-table-column prop="remarks" label="备注" min-width="100"></el-table-column>
                </el-table>
            </el-row>
        </el-dialog>
    </template>
</template>

<script>
import print from "@/utils/print";
export default {
    data() {
        return {
            visible: false,
            orderlist: [],
            borrowPurchaseOrderState: false,
            borrowPurchaseOrders: [],
        };
    },
    methods: {
        open() {
            this.visible = true;
            return this;
        },
        setData(dataarr) {
            console.log("dataarr:", dataarr);
            this.orderlist = dataarr;
        },
        print() {
            print(this.$refs.printMain);
        },
        //借货入库单
        async opBorrowShow(row) {
            var returnValue = await this.$API.auth.GetProcessApi.get(
                `storage-order/borrow-storage-order-detail/${row.borrowStorageOrderId}`,
                {}
            );
            if (returnValue.status == 200) {
                this.borrowPurchaseOrders = [returnValue.response];
            } else {
                this.$message.error("操作失败:" + returnValue.msg);
            }
            this.borrowPurchaseOrderState = true;
        },
    },
};
</script>

<style scoped>
.text-c {
    text-align: center;
}
.text-r {
    text-align: right;
}
.h-5 {
    height: 5px;
    width: 100%;
}

.h-10 {
    height: 10px;
    width: 100%;
}

.h-30 {
    height: 30px;
    width: 100%;
}

.el-tablebody {
    border: 1px solid #ebeef5;
    width: 100%;
    border-collapse: collapse;
}

.title {
    display: flex;
    justify-content: center;
    font-size: large;
    font-weight: bolder;
}

.subtitle {
    display: flex;
    justify-content: center;
}

.interval {
    height: 20px;
    width: 100%;
}

th,
td {
    border: 1px solid #ebeef5;
    /* 为单元格添加边框 */
    padding: 8px;
    text-align: left;
    /* 可选，设置文本对齐方式 */
}

@media print {
    /* 横向打印样式 */
    @page {
        size: landscape;
        /* 设置页面为横向 */
        margin: 10mm;
        /* 根据需要设置页边距 */
    }

    body {
        margin: 0;
        padding: 0;
    }

    .print-main {
        /* 这里应用于要打印的元素的样式 */
    }
}
</style>
